<template>
  <view class="layout">
    <view class="fill" :style="{height:navBarHeight() + 'px'}">

    </view>
    <view class="navbar">
      <view class="statusBar" :style="{height:statusBarHeights() + 'px' }"></view>
      <view class="titleBar" :style="{height:titleBarHeight()+ 'px'}">
        <view class="title">
          {{title}}
        </view>
        <navigator class="search" url="/pages/search/search">
          <uni-icons class="icon" type="search" size="18" color="#888"></uni-icons>
          <text class="text">搜索</text>
        </navigator>
      </view>
    </view>

  </view>
</template>

<script setup>
  import {
    statusBarHeights,
    titleBarHeight,
    navBarHeight
  }
  from '@/utils/system.js'
  defineProps({
    title: {
      type: String,
      default: '壁纸'
    }
  })
</script>

<style lang="scss" scoped>
  .layout {
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 999;
      background:
        linear-gradient(to bottom, transparent, #fff 400rpx),
        linear-gradient(to right, #beecd8 20%, #f4e2d8);

      .statusBar {}

      .titleBar {
        display: flex;
        padding: 0 30rpx;
        align-items: center;

        .title {
          font-size: 22rpx;
          font-weight: 700;
          color: $text-font-color-1;
        }

        .search {
          width: 220rpx;
          height: 50rpx;
          border-radius: 60rpx;
          margin-left: 30rpx;
          font-size: 28rpx;
          color: #999;
          border: 1px solid #fff;
          background: rgba(255, 255, 255, .4);
          display: flex;
          align-items: center;

          .icon {
            margin-left: 5rpx;
          }

          .text {
            font-size: 18rpx;
            color: #888;
            padding-left: 10rpx;
          }
        }
      }
    }
  }
</style>